<template>
  <div class="container-box">
    <Header></Header>
    <div class="container">
      <div class="header">
        <p>购物车</p>
        <el-steps
          :active="active"
          finish-status="success"
          class="steps"
          :align-center="true"
        >
          <el-step title="购物车" />
          <el-step title="订单确认" />
          <el-step title="订单完成" />
        </el-steps>
        <p><a href="/index">继续购物</a></p>
      </div>
      <div class="main">
        <ul>
          <li v-for="item in dataSource" :key="item.id">
            <div class="good">
              <el-checkbox
                size="large"
                v-model="item.checked"
                @change="chooseItem(item)"
              />
              <img
                :src="require('@/static/images/shopping-cart/' + item.img)"
                alt=""
              />
              <div class="desc">
                <p>{{ item.title }}</p>
                <p>颜色分类：<br />{{ item.category.join('+') }}</p>
              </div>
            </div>
            <div class="price">￥ {{ item.price }}</div>
            <div class="number">
              <el-button>-</el-button>
              <p>{{ item.number }}</p>
              <el-button>+</el-button>
            </div>
            <div class="total">￥ {{ item.price * item.number }}</div>
            <div class="action">
              <el-button type="danger">删除</el-button>
            </div>
          </li>
        </ul>
        <div class="settlement">
          <el-checkbox size="large" label="全选" @change="chooseAll" />
          <p>删除</p>
          <p>
            共<span>{{ totalNumber }}</span
            >件商品
          </p>
          <p>
            合计： <span>￥{{ totalPrice }}</span>
          </p>
          <el-button
            :style="{ backgroundColor: totalNumber === 0 ? '' : 'green' }"
            @click="toConfirmOrder"
            >结算</el-button
          >
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import Header from '@/components/header/index.vue';
import Footer from '@/components/footer/index.vue';
import Tabbar from '@/components/tabbar/index.vue';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = require('@/mock/shopping-cart/index.json');
import { useRouter } from 'vue-router';

export default defineComponent({
  components: {
    Header,
    Footer,
    Tabbar,
  },
  setup() {
    const active = ref(0);
    const dataSource = ref<any[]>([]);
    dataSource.value = data.data;
    const allIn = ref(false);
    const router = useRouter();

    const totalNumber = computed(() => {
      let total = 0;
      dataSource.value.forEach((item: any) => {
        item.checked ? (total += item.number) : '';
      });
      return total;
    });
    const totalPrice = computed(() => {
      let total = 0;
      dataSource.value.forEach((item: any) => {
        item.checked ? (total += item.number * item.price) : '';
      });
      return total;
    });
    return {
      active,
      data,
      dataSource,
      allIn,
      totalNumber,
      totalPrice,
      router,
    };
  },
  methods: {
    chooseAll() {
      this.allIn = !this.allIn;
      this.dataSource.forEach((item: any) => {
        item.checked = this.allIn;
      });
    },
    toConfirmOrder() {
      this.router.push('/shopping-cart/order-confirm');
    },
  },
});
</script>

<style lang="scss" scoped>
.container {
  width: 1163px;
  margin: 0 auto;
  padding-top: 10px;

  .header {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;

    .steps {
      width: 450px;

      ::v-deep .el-step__icon.is-text {
        font-size: 12px;
      }
      ::v-deep .el-step__title {
        font-size: 12px;
      }
    }
  }

  .main {
    ul li {
      width: 100%;
      height: 118px;
      display: flex;
      justify-content: space-between;
      padding: 18px 0px;
      &:not(:last-child) {
        border-bottom: 1px dashed #999;
      }

      .good,
      .price,
      .number,
      .total,
      .action {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .good {
        height: 100%;
        display: flex;
        align-items: center;

        img {
          height: 100%;
          margin-right: 10px;
          margin-left: 20px;
        }

        .desc {
          align-self: flex-start;

          p {
            &:first-child {
              margin: 10px 0px;
            }
            &:last-child {
              font-size: 12px;
              color: #666;
            }
          }
        }
      }

      .number {
        p {
          margin: 0px 8px;
        }
      }
    }
  }

  .settlement {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ccc;
    box-sizing: border-box;

    padding-left: 8px;

    span {
      color: red;
    }

    ::v-deep .el-button {
      height: 100%;
      width: 120px;
      border: none;
      background-color: #666;
      border-radius: 0px;
      color: #fff;
    }
  }
}
</style>
